<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距-margin</title>
		<style type="text/css">
			body {
				margin: 0;
			}
			.box1 {
				width: 300px;
				height: 150px;
				background-color: #0077AA;
				color: white;
				font-size: 50px;
				/* display: inline-block;/*行内块 ，可以在一行显示，可以设置宽高*/ */
			}
			.top {
				margin:20px 30px 40px 50px;
			}
			.bottom {
				margin: 100px 160px;
			}
		</style>
	</head>
	<body>
		<!-- 外边距-margin
		 盒模型：标准盒模型 --w3c盒模型
			content + padding + border + margin  
			
			margin:30px   上下左右全是30px
			margin:20px 30px  第一个值是上下  第二值是左右
			margin:20px 30px 40px  第一个上  第二值 左右  第三个值是下
			margin:20px 30px 40px 50px
			margin:
			margin-top:30px
			margin-bottom:30px
			margin-left:30px
			margin-right:30px
			
			注意：
			1.外边距合并：
				块级元素垂直的方向，外边距相撞时，重叠、取最大值  狭路相逢勇者胜，谁大听谁的
				水平的方向，左右外边距不合并 不重叠
				行内元素上下的外边距不生效，左右不重叠
			2、第一个块级的子元素margin-top 可能会让父元素的外边距收到影响	
				解决方法：
				1、父元素加边框 尺寸会变
				2、父元素或者子元素加浮动
				3、父元素加溢出处理 
			3、设置外边距使用的单位：px auto  负值  百分比
				auto:只能是水平方向自动居中
		 -->
		 <!-- <div class="box1 top">1</div>
		 <div class="box1 bottom">2</div> -->
		 <span class="box1 top">秦皇岛职业技术学院，信息工程系，移动应用专业</span>
		 <span class="box1 bottom">网上授课</span>
	</body>
</html>
